<template>
  <div class="bg-color">
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">收货人</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" placeholder="请填写收货人姓名" v-model="addressInfo.receiverName"/>
        </div>
      </div>

      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">联系电话</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请填写收货人手机号" v-model="addressInfo.receiverMobileNo"/>
        </div>
      </div>

      <a class="weui-cell weui-cell_access" href="javascript:;">
        <div class="weui-cell__hd">
          <label class="weui-label">所在地区</label>
        </div>
        <div class="weui-cell__bd weui-cell__ft" @click="getArea">
          {{addressInfo.addressProvince?addressInfo.addressProvince+" "+addressInfo.addressCity+" "+addressInfo.addressCounty:'请选择所在地区'}}
        </div>
      </a>

      <div class="weui-cell">
        <div class="weui-cell__bd">
          <textarea class="weui-textarea" placeholder="请填写详细地址，不少于5个字" rows="5" v-model="addressInfo.address"></textarea>
        </div>
      </div>
    </div>

    <!--地址框-->
    <div :class="{actionsheetToggle:isSelectArea}">
      <div class="weui-mask_transparent actionsheet__mask"></div>
      <div class="weui-actionsheet">
        <div class="weui-actionsheet__menu">
          <div class="weui-cell">
            <div class="weui-cell__bd title">
              <p>选择所在地区</p>
              <span class="weui-icon-cancel" @click="closeAreaBox"></span>
            </div>
          </div>
         <v-distpicker type="mobile" @selected="onSelected"></v-distpicker>
        </div>
      </div>
    </div>

    <div class="btn-box">
      <a class="weui-btn weui-btn_warn" href="javascript:;" @click.prevent="saveAddress">保存并使用</a>
    </div>


  </div>
</template>

<script>
  import {isPoneAvailable} from '../../../assets/js/tools';
  import {ipconfig} from '../../../assets/js/ipconfig';
  import {saveAddress} from '../../../assets/js/getData';
  export default {
    name: "addAddress",
    data(){
      return {
        loginUrl:ipconfig.loginUrl,//图片、视频、音频等资源访问路径
        isSelectArea:false,

        province:'',
        city:'',
        county:'',

        addressInfo:{
          receiverName:'',
          receiverMobileNo:'',
          addressProvince:'',
          addressCity:'',
          addressCounty:'',
          address:''
        },

        source:null,//来源
        orderId:null,
      }
    },
    created(){
      this.source = this.$route.query.source;
      this.orderId = this.$route.query.orderId;

      if(typeof(this.$route.query.address)!='undefined'){
        let address = this.$route.query.address;
        this.addressInfo.receiverName = address.receiverName;
        this.addressInfo.receiverMobileNo = address.receiverMobileNo;
        this.addressInfo.addressProvince = address.addressProvince;
        this.addressInfo.addressCity = address.addressCity;
        this.addressInfo.addressCounty = address.addressCounty;
        this.addressInfo.address = address.address;
      }
    },
    methods:{
      //省市选择选最后一项时触发
      onSelected(data){
        this.addressInfo.addressProvince = data.province.value;
        this.addressInfo.addressCity = data.city.value;
        this.addressInfo.addressCounty = data.area.value;
        this.isSelectArea = false;
      },
    	//点击选择地区显示省市列表框
    	getArea(){
    		this.isSelectArea = true;
    	},
    	//关闭选择地区框
      closeAreaBox(){
        this.isSelectArea = false;
      },
    	//保存地址
      saveAddress(){
    	  if(!isPoneAvailable(this.addressInfo.receiverMobileNo)){
          Toast('请输入正确的手机号');
          return;
        }
        saveAddress(this.addressInfo).then(res => {
          if(res.data.reqResult.code>0){
            this.$router.replace({name:'addressList',query:{source:this.source,orderId:this.orderId}});
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      }
    }
  }
</script>

<style scoped>
  .bg-color{
    height: 100vh;
    background: #F2F2F2;
    position: relative;
  }
  .btn-box{
    margin-top: 1.3rem;
  }
  .weui-cell__bd.weui-cell__ft{
    text-align: left;
    color: #cccccc;
    font-size: 0.7rem;
  }

  .weui-actionsheet{
    /*max-height: 70%;*/
    /*overflow: auto;*/
  }
  .weui-mask_transparent{
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    display: none;
  }
  .actionsheetToggle .weui-mask_transparent{
    opacity: 1;
    display: block;
  }
  .actionsheetToggle .weui-actionsheet {
    transform: translate(0, 0);
  }
  .weui-actionsheet__menu .title{
  	text-align: center;
  }
  .weui-actionsheet__menu .title .weui-icon-cancel{
    position: absolute;
    top: 0;
    right: 0;
  }
  .select-area{
  	display: flex;
  	justify-content: space-around;
  }
</style>
